<template>
  <div>
    <swiper
      :loop="true"
      slidesPerView="auto"
      :autoplay="{
        delay: 3000, // 自动轮播间隔时间，单位为毫秒
        disableOnInteraction: false, // 用户操作后是否停止自动轮播
      }"
      :pagination="{
        clickable: true,
      }"
      :modules="modules"
      class="view-box-context"
    >
      <swiper-slide v-for="(item, index) in swiperList" :key="index">
        <img class="img" :src="item.picUrl" alt="" @click="goOther(item.url)" />
      </swiper-slide>
    </swiper>
  </div>
</template>
<script lang="ts" setup>
import { Swiper, SwiperSlide } from "swiper/vue";
import { Autoplay, Pagination } from "swiper/modules";
import "swiper/css/bundle";
const modules = [Autoplay, Pagination];
type bannerObj = {
  picUrl: string;
  url: string;
};
let swiperList = ref<bannerObj[]>([]);

const init = async () => {
  const { data } = await useServerFetch<bannerObj[]>("/app-api/promotion/banner/list", {
    method: "get",
    query: {
      position: 1,
    },
  }) as { data: bannerObj[] };
  swiperList.value = data;
};
const goOther = (url: string) => {
  window.location.href = url;
};
init();
</script>
<style lang="stylus" scoped>
.view-box-context{
  width 100%
  .img{
    width 100%
    cursor pointer
  }
}
</style>
